<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>4_人员案例-深度监视</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="demo">
            <ul>
                <li>姓名: {{name}}</li>
                <li>性别: {{gender}}</li>
                <li>年龄: 对外:{{age.foreignAge}}, 真实: {{age.realAge}}</li>
            </ul>
            <button @click="age.foreignAge += 1">对外年龄+1</button>
            <button @click="age = {foreignAge: 100,realAge: 200}">替换掉age对象</button>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false;

        new Vue({
            el: '#demo',
            data: {
                name: '小猪佩奇',
                gender: '男',
                age: {
                    foreignAge: 18,
                    realAge: 42
                }
            },
            watch: {
                // 监视某个对象中某个属性的变化
                // #region
                // 'age.foreignAge' : {
                //     handler(){
                //         console.log('foreignAge被改变了')
                //     }
                // }
                // #endregion

                // 监视某个对象的改变(地址值) , 不监视某个属性的改变
                // #region
                // age: {
                //     handler(){
                //         console.log('age被改变了')
                //     }
                // }
                // #endregion

                // 监视某个对象的改变(地址值) , 且也可以监视到对象中属性的改变
                // #region
                age: {
                    deep: true,
                    handler(){
                        console.log('age被改变了 或 age中的某个属性改变了')
                    }
                }
                // #endregion
            
            }
        })
        
    </script>
</html>